{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{% if customer %}
{% else %}
{{ 'customer.css' | asset_url | stylesheet_tag }}
<div class="bg_loyalty">
  <div id="joinnow">
  <div class="page-width">
    <div class="tenways-loyalty">
      <div class="text-reward">
        <div class="left">
          {% if section.settings.text != blank %}
            <div class="text">{{ section.settings.text }}</div>
          {% endif %}
          {% if section.settings.richtext != blank %}
            <div class="rte">{{ section.settings.richtext }}</div>
          {% endif %}
        </div>
      </div>
      <div class="customer loyalty-reward">
        <p class="p">
      {{ section.settings.text_1 }}
         <modal-opener class="twy-button product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-template--15410342789269__aae184d7-95a2-42f1-86ba-fd2d5ad1f023" >
            <button id="" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">
             {{ section.settings.text_2 }}
            </button>
          </modal-opener>
          <a class="" href="/account/login"></a>
        </p>
        {%- form 'create_customer', novalidate: 'novalidate', return_to: '/pages/loyalty-program-account' -%}
          {%- if form.errors -%}
            <h2
              class="form__message"
              tabindex="-1"
              autofocus>
              <svg
                aria-hidden="true"
                focusable="false"
                role="presentation">
                <use href="#icon-error" />
              </svg>
              {{ 'templates.contact.form.error_heading' | t }}
            </h2>
            <ul>
              {%- for field in form.errors -%}
                <li>
                  {%- if field == 'form' -%}
                    {{ form.errors.messages[field] }}
                  {%- else -%}
                    <a href="#RegisterForm-{{ field }}">
                      {{ form.errors.translated_fields[field] | capitalize }}
                      {{ form.errors.messages[field] }}
                    </a>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
          {%- endif -%}
          <div class="field">
            <input
              type="text"
              name="customer[first_name]"
              id="RegisterForm-FirstName"
              {% if form.first_name %}value="{{ form.first_name }}"{% endif %}
              autocomplete="given-name"
              placeholder="{{ 'customer.register.first_name' | t }}">
            <label for="RegisterForm-FirstName">
              {{ 'customer.register.first_name' | t }}
            </label>
          </div>
          <div class="field">
            <input
              type="text"
              name="customer[last_name]"
              id="RegisterForm-LastName"
              {% if form.last_name %}value="{{ form.last_name }}"{% endif %}
              autocomplete="family-name"
              placeholder="{{ 'customer.register.last_name' | t }}">
            <label for="RegisterForm-LastName">
              {{ 'customer.register.last_name' | t }}
            </label>
          </div>
          <div class="field">
            <input
              type="email"
              name="customer[email]"
              id="RegisterForm-email"
              {% if form.email %}
              value="{{ form.email }}"
              {% endif %}
              spellcheck="false"
              autocapitalize="off"
              autocomplete="email"
              aria-required="true"
              {% if form.errors contains 'email' %}
              aria-invalid="true"
              aria-describedby="RegisterForm-email-error"
              {% endif %}
              placeholder="{{ 'customer.register.email' | t }}">
            <label for="RegisterForm-email">
              {{ 'customer.register.email' | t }}
            </label>
          </div>

          {%- if form.errors contains 'email' -%}
            <span id="RegisterForm-email-error" class="form__message">
              <svg
                aria-hidden="true"
                focusable="false"
                role="presentation">
                <use href="#icon-error" />
              </svg>
              {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
            </span>
          {%- endif -%}
          <div class="field">
            <input
              type="password"
              name="customer[password]"
              id="RegisterForm-password"
              aria-required="true"
              {% if form.errors contains 'password' %}
              aria-invalid="true"
              aria-describedby="RegisterForm-password-error"
              {% endif %}
              placeholder="{{ 'customer.register.password' | t }}">
            <label for="RegisterForm-password">
              {{ 'customer.register.password' | t }}
            </label>
          </div>
          <div class="accepts-marketing">
          <input
            type="hidden"
            name="customer[accepts_marketing]"
            value="" />
          <input
            type="checkbox"
            name="customer[accepts_marketing]"
            checked />
          <label for="accepts-marketing">
            {%- if settings.accepts-marketing -%}
              {{ section.settings.text_3 }}
            {%- endif -%}
          </label>
        </div>
          {%- if form.errors contains 'password' -%}
            <span id="RegisterForm-password-error" class="form__message">
              <svg
                aria-hidden="true"
                focusable="false"
                role="presentation">
                <use href="#icon-error" />
              </svg>
              {{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.
            </span>
          {%- endif -%}
          <button>
             {{ section.settings.text_4 }}          
          </button>
        {%- endform -%}
      </div>
    </div>
  </div>

</div>
</div>
{% endif %}


{% schema %}
  {
    "name": "Reward register",
    "tag": "section",
    "class": "spaced-section reward-register",
    "settings": [
      {
        "type": "text",
        "id": "text",
        "label": "Text"
      }, {
        "type": "richtext",
        "id": "richtext",
        "label": "Richtext"
      },
      {
        "type": "text",
        "id": "text_1",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "text_2",
        "label": "Text"
      },
       {
        "type": "text",
        "id": "text_3",
        "label": "Text"
      },
       {
        "type": "text",
        "id": "text_4",
        "label": "Text"
      }
    ],
    "presets": [
      {
        "name": "Reward register"
      }
    ]
  }
{% endschema %}